---
section: 5-API
order: 1
name: css prop
---

import { CssPropConditionalRules, CssPropDynamic, CssPropObj } from '../examples/css-prop';

# css prop

Using a `css` function call on a `css` prop is the preferred way to apply styles to a JSX element. This is enabled when a JSX pragma is defined, and the JSX element takes a `className` prop.

We use a syntax similar to Emotion's `css` prop, but we wrap the style object in a `css` function call. Using the `css` function call allows us to apply type checking, and it makes it clear that the styles should be applied by Compiled (and not a different CSS-in-JS library).

> **Only use `css` with Compiled APIs**<br />
> The return value of the `css` function call at runtime is `null` and can only be passed to the `css` prop, or used with other Compiled APIs.

<CssPropObj />

## Using composition to combine styles

Read [composition](/composition) for more information around composing styles together.

## Conditional rules

Conditionally apply [CSS rules](https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured#Selectors) by passing an array to the `css` prop. The last styles applied in the array wins.

<CssPropConditionalRules />

## Dynamic styling and props

We no longer recommend passing dynamic styling or props to Compiled, as they can be tricky for other Atlassian tooling to statically analyse.

Instead, we recommend you:

- First, determine whether you truly need the styles to be dynamic. Many cases of dynamic styling can be rewritten as conditional rules or [`cssMap` usages](/api-cssmap).
- If you absolutely need to use dynamic styling, you can pass dynamic styling to the `style` prop. Check out the [UI Styling Standard](https://atlassian.design/components/eslint-plugin-ui-styling-standard/migration-guide) for more details.

In the past, this was how to write dynamic styles with Compiled:

<CssPropDynamic />
